<html>
    <head>
            <!--<link rel="stylesheet" href="screen.css" type="text/css" />-->
            <title>k33g-org</title>
            <meta name="viewport" content="user-scalable=no, width=device-width" />
            <link rel="stylesheet" href="css/r2.css" type="text/css">
            <script src="js/r2.core.js"></script>
            <script src="js/r2.query.js"></script>
            <script src="js/r2.ui.js"></script>
    </head>
    <body id="body">
        <r2-webapp id="webapp">
            <r2-header id="header">
                    K33g.orG
            </r2-header><!--end header-->
            <r2-form id="frm1">

                <r2-group id="content1">

                    <p><input class="r2-field" id="txt1" type='texte' placeholder='Hello@world'/></p>
                    <p><input class="r2-field" id="txt2" type='texte' placeholder='www.k33g.org'/></p>

                </r2-group> <!--end content-->

            </r2-form> <!--end form1-->

            <r2-footer id="footer">
                    R2D2
            </r2-footer><!--end header-->	

        </r2-webapp> <!--end container-->
    </body>
    <script>


        r2('#body').touchmove(function(event){
            console.log(event.eventPhase);
            console.log("body touchmove");
            r2('#header').innerHTML([
                'body touchmove'
            ].join(''));
        });
        
        r2('#frm1').touchmove(function(event){
            console.log(event.eventPhase);
            console.log("frm1 touchmove");
            r2('#header').innerHTML([
                'frm1 touchmove'
            ].join(''));
        });
        
        r2('#frm1').click(function(event){
            console.log(event.eventPhase);
            console.log("frm1 click");
            r2('#header').innerHTML([
                'frm1 click'
            ].join(''));
        });
        
    </script>
</html>